<template>
  <div id="chat_record" class="account">
        <div class="search">
            <span>
                <el-input type="text"
                        v-model="req.componeyName"
                        placeholder="请输入企业名称"
                        maxlength="30"
                        class="searc-input mr25"
                    />
            </span>
            <span>
                <el-input type="text"
                        v-model="req.jobName"
                        placeholder="请输入职位名称"
                        maxlength="30"
                        class="searc-input"
                    />
            </span>
            <button class="green-bg white pl10 pr10 pt10 pb10 radius ml20"
                @click="toSearch"
            >
                <i class="el-icon-search"></i>
            </button>
        </div>

      <div class="tab-content">
           <dl>
                <dt>
                    <span>企业名称</span>
                    <span>职位名称</span>
                    <span>操作</span>
                </dt>
                <dd v-for="(item, index) in list" :key="index">
                    <span style="overflow: hidden;">
                        <em>{{item.companyName}}</em>
                    </span>
                    <span>
                        <em>{{item.positionName}}</em>
                    </span>
                    <span>
                        <router-link :to="'chats-detail/'+item.id+'?companyName='+item.companyName+'&positionName='+item.positionName">查看<i v-if="item.isAccountRead==0"></i></router-link>
                    </span>
                </dd>
                <!-- <dd>
                    <span style="overflow: hidden;">
                        <div style="float: left; margin-left: 20px; margin-right: 20px;">
                            <img :src="require('../../../assets/image/default_enterprise_logo.jpg')" width="50" alt="">
                        </div>
                        <div style="float: left;">
                            <em>设计师主力</em>
                            <small>装修装饰 - 为融资 - 20-99人</small>
                        </div>
                    </span>
                    <span>
                        <em>设计师主力</em>
                        <small>装修装饰 - 为融资 - 20-99人</small>
                    </span>
                    <span>
                        <a>查看</a>
                    </span>
                </dd> -->
                    <el-pagination
                        background
                        prev-text="上一页"
                        next-text="下一页"
                        layout="prev, pager, next"
                        @current-change="curPage"
                        :page-size="page.count"
                        :total="page.total">
                    </el-pagination>
           </dl>
            </div>
      </div>
  </div>
</template>

<script>
import {chatsList} from "@/api/base";
export default {
    data(){
        return{
            req:{
                limit: 3,
                page: 1,
                params:'',
                componeyName: '',
                jobName: ''
            },
            page:{},
            list:''
        }
    },
    watch:{
        req:{
            handler(newVal, oldVal) {
                this.init();
            },
            immediate: true,
            deep: true
        },
    },
    methods:{
        curPage(e){
            this.req.page = e;
        },
        toSearch(){
            this.init();
        },
        init(){
            console.log(this.req);
            chatsList(this.req).then(res => {
                this.list = res.data;

                //分页部分
                this.page.crr_page = this.req.page;
                this.page.pages = Math.ceil(res.total / this.req.limit); // 总页码
                this.page.count = this.req.limit; //每页显示
                this.page.total = res.total; //总条数
                this.page.hasPrevious = res.hasPrevious; //是否有上一页
                this.page.hasNext = res.hasNext; //是否有下一页
            })
        }
    },
    created(){
        this.init();
    },
    mounted(){
        this.$emit('navIndex', 7);
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.account {
  float: right;
  width: 970px;
  padding: 30px 35px;
  background-color: #fff;
  color: #787878;
}
.search{
    span{
        width: 300px;
        .searc-input{
            width: 300px;
        }
    }
    button{
        margin-left: 15px;
      background: #3EACC4;
      color: #fff;
      padding: 8px 15px;
      border-radius: 2px;
    }
}
.tab-content{
    margin-top: 28px;
    font-size: 14px;
    color: #787878;
    dl{
        dt{
            width: 900px;
            height: 50px;
            line-height: 50px;
            background: #F7F7F7;
            span{
                display: block;
                float: left;
                &:nth-child(1){
                    width: 50%;
                    height: 22px;
                    text-indent: 5em;
                }
                &:nth-child(2){
                    width: 30%;
                }
                &:nth-child(3){
                    width: 20%;
                    text-align: right;
                    padding-right: 20px;
                }
            }
        }
        dd{
            height: 60px;
            // line-height: 50px;
            border-bottom: 1px solid #E8E8E8;

            overflow: hidden;
            span{
                display: block;
                float: left;
                &:nth-child(1){
                    width: 50%;
                    padding-left: 20px;
                }
                &:nth-child(2){
                    width: 30%;
                }
                &:nth-child(3){
                    width: 20%;
                    text-align: right;
                    padding-right: 20px;
                    position: relative;
                }
                 em{
                    font-style: normal;   
                    line-height: 60px;
                    display: block;
                    line-height: 1.8;
                    margin-top: 20px;
                }

                i{
                    font-style: normal;
                    background: red;
                    display: block;
                    width: 10px;
                    height: 10px;
                    border-radius: 5px;
                    position: absolute;
                    top: 25px;
                    right: 5px;
                }
                // small{
                //     color: #c3c3c3;
                // }
                // em,small{
                //     display: block;
                //     line-height: 1.8;
                // }

                a{
                    line-height: 60px;
                    display: block;
                }
            }

            &.no-data{
                span{
                    width: 100%;
                    height: 50px;
                    text-align: center;
                }
            }
        }
    }
 
    >>>.el-pagination{
        margin-top: 50px;
        margin-bottom: 20px;
        text-align: center;

        button{
            cursor: pointer;
            outline: none;
            width: 70px;
            height: 30px;
            background: #FFFFFF;
            border: 1px solid #EBEBEB;
            border-radius: 4px;
            font-size: 14px;
            color: #777777;
            margin-left: 5px;
            margin-right: 5px;
            font-weight: 400;
            &:disabled{
                color: #BBBBBB;
            }
        }

        .el-pager{
            .number{
                background: #FFFFFF;
                border: 1px solid #EBEBEB;
                font-weight: normal;
                width: 30px;
                height: 30px;
                color: #777777;
                &.active{
                    background: #3DABC4;
                    border-radius: 4px;
                    color: white;
                }
            }
        }

    }

    .pages{
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%);
        button{
            outline: none;
            border: 0;
        }
        .prev,.next{
            width: 70px;
            height: 30px;
            background: #FFFFFF;
            border: 1px solid #EBEBEB;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 400;
            color: #BCBCBC;
            cursor: pointer;
        }
        .page{
            button{
                font-size: 14px;
                width: 30px;
                height: 30px;
                background: #3EACC4;
                border-radius: 4px;
                color: #FFFFFF;
                margin-left: 10px;
                margin-right: 10px;
            }
        }
    }
}
.mr25{
    margin-right: 25px;
}
</style>